<template>
	<view class="container">
		<!-- 详情图片 -->
		<view class="detailImage" >
			<image :src="goodsList.img">
		</view>
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailInfoName">
				<label>{{goodsList.goodsname}}</label>
			</view>
			<view class="detailInfoPrice">
				<label style="color: red;">￥{{goodsList.price}}</label>
				<label style="font-size: 24rpx;color: #ccc;">(此价格不与套装优惠同时享受)</label>
			</view>			
		</view>
		
		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<view class="youhui">
				<view>促销：<label class="manjian">满减</label><label class="dazhe">满2件9折；3件8折</label></view>
			</view>
			<!-- 数量加减 -->
			<view class="changeNum">
				<view class="num">购买数量</view>
				<view class="action">
				  <label class="jian" @click="jian">-</label>
				  <label class="zhi">{{num}}</label>
				  <label class="jia" @click="num++">+</label>
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">商品属性</label>
				</view>
				<view class="productGuige">
					<label>规格</label>
					<view :class=" isActive == index ? 'active threed3i1' : 'threed3i1' "  
					v-for="(item,index) in goodsList.specsattr"
					@click="changeIndex(index)"
					>{{item}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		 <view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<!-- 需要处理图片自适应问题 -->
		    <rich-text :nodes="goodsList.description"></rich-text>
		</view>
		
		<view class="productEval">
			<view class="eval">商品评价</view>
			<view >
				<label class="evalUsername">小李白</label>
				<label class="evalUsertitle">交易很好，物流很快</label>					
				<view class="evalImage">
					<image src="@/static/detail/pingjia1.jpg">
					<image src="@/static/detail/pingjia2.jpg">
					<image src="@/static/detail/pingjia3.jpg">
				</view>
				<label class="evalTime">2020-02-12</label>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot">
			<button class="footbtn1" @click="addCart">加入购物车</button>
			<button class="footbtn2" @click="toDetail">立即购买</button>
		</view>
	</view>
</template>

<script>
	// 导入图片自适应工具类
	// let actionimage = require('../../utils/ActionImage.js');
	import checktoken from "../../utils/chektoken.js"
	export default {
		data() {
			return {
				id:"",
				goodsList:[],
				isActive:0,
				num:1
			}
		},
		onLoad(options) {
			this.id = options.id
			// console.log(this.id)
			this._goodsinfo()
		},
		methods: {
			jian(){
				this.num--;
				if(this.num < 1){
					this.num = 1
				}
			},
			async _goodsinfo(){
				let data = {
					id:this.id
				}
				let res = await this.$Api._getgoodsinfo(data)
				res.data.list.map((item)=>{
					item.img = this.$baseUrl + item.img
				})
				// 将字符串specsattr 转换为数组的格式并重新赋值
				res.data.list[0].specsattr = res.data.list[0].specsattr.split(",")
				this.goodsList = res.data.list[0];
				// console.log(this.goodsList)
			},
			changeIndex(index){
				this.isActive = index
				// console.log(this.isActive)
			},
			// 判断是否登录
			async addCart(){
				let data = {
					uid:uni.getStorageSync("uid"),
					goodsid:this.id,
					num:this.num,
					checked:1
				}
				let header = {
					authorization:uni.getStorageSync("token")
				}
				console.log(data)
				let res = await this.$Api._cartadd(data,header)
				console.log(res)
				if(res.data.code == 200){
					uni.showToast({
						title:"添加成功"
					})
				}else if(res.data.code == 200){
					uni.showToast({
						title:"登录已过期,请重新登录",
						icon:"none"
					})
				}
			},
			toDetail(){
				uni.switchTab({
					url:"../cart/cart"
				})
			}
		}
	}
</script>

<style>
	@import url("../../common/css/details.css");
	.active{
		background: #f40;
	}
</style>
